// --------------------------------------------注册页面-----------------------------------------------
import React, { useState } from "react";
import popmenImg from "../img/popmen.png";
import suoImg from "../img/suo.png";
import logo10001 from "../img/lhsh.png";
import logo10002 from "../img/WX.png";
import enroll from "../style/enroll.module.css";
import { Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { register } from "../api/enroll";
const App: React.FC = () => {
  const [tel, setTel] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  // 显式指定 phone 参数的类型为 string
  const validatePhone = (phone: string) => {
    return /^1[3-9]\d{9}$/.test(phone);
  };
  const navigate = useNavigate();

  const handleRegister = () => {
    // 清除之前显示的提示
    Toast.clear();

    if (!tel || !password || !confirmPassword) {
      Toast.show({ content: "输入框不得为空！", duration: 2000 });
      return;
    }
    if (!validatePhone(tel)) {
      Toast.show({ content: "账号格式不正确！", duration: 2000 });
      return;
    }
    if (password !== confirmPassword) {
      Toast.show({ content: "两次输入的密码不一致！", duration: 2000 });
      return;
    }
    // 注册成功
    Toast.show({ content: "注册成功！", duration: 2000 });
    // 注册接口
    register ({
        username: tel, // 传递账号
        password: password, // 传递密码
      })
      .then((response) => {
        const res = response.data;
        console.log(res, "注册信息");
        navigate("/login");
      });
  };

  return (
    <div className={enroll.big}>
      <div className={enroll.image}>
        <img src={logo10001} alt="品牌logo" className={enroll.img} />
      </div>
      <div className={enroll.input}>
        <div>
          <img src={popmenImg} alt="账号图标" />
          <input
            type="tel"
            placeholder="请输入账号"
            value={tel}
            onChange={(e) => setTel(e.target.value)}
          />
        </div>
        <div>
          <img src={suoImg} alt="密码图标" />
          <input
            type="password"
            placeholder="请输入密码"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <div>
          <img src={suoImg} alt="确认密码图标" />
          <input
            type="password"
            placeholder="请再次输入密码"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          />
        </div>
      </div>
      <div className={enroll.register} onClick={handleRegister}>
        注 册
      </div>
      <p
        className={enroll.login}
        onClick={() => {
          navigate("/login");
        }}
      >
        已有账号？前往登录
      </p>
      <div className={enroll.it}>
        <div className={enroll.its}>
          <p>其他登录方式</p>
          <img src={logo10002} alt="第三方登录" />
        </div>
        <p className={enroll.text}>@此版权为大喇叭编程实训基地所有</p>
      </div>
    </div>
  );
};

export default App;
